<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>根据状态查询学生信息 - 学生信息管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        gray: {
                            50: '#F5F7FA',
                            100: '#E5E6EB',
                            200: '#C9CDD4',
                            300: '#86909C',
                            400: '#4E5969',
                            500: '#272E3B',
                            600: '#1D2129',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-lg transform hover:-translate-y-0.5;
            }
            .form-focus {
                @apply focus:ring-2 focus:ring-primary/30 focus:border-primary focus:outline-none;
            }
            .table-hover {
                @apply transition-colors duration-150 hover:bg-gray-50;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans min-h-screen">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <i class="fa fa-graduation-cap text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-gray-600">学生信息管理系统</h1>
            </div>
            <nav class="hidden md:flex items-center space-x-8">
                <a href="index.html" class="text-gray-400 hover:text-primary transition-colors">首页</a>
                <a href="all-students.html" class="text-gray-400 hover:text-primary transition-colors">全部学生</a>
                <a href="student-by-id.html" class="text-gray-400 hover:text-primary transition-colors">ID查询</a>
                <a href="students-by-status.html" class="text-primary font-medium">状态查询</a>
                <a href="students-by-name.html" class="text-gray-400 hover:text-primary transition-colors">姓名查询</a>
                <a href="update-student.html" class="text-gray-400 hover:text-primary transition-colors">信息更新</a>
            </nav>
            <button class="md:hidden text-gray-500">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 py-8">
        <div class="mb-8">
            <div class="flex items-center space-x-3 mb-2">
                <a href="index.html" class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-home"></i>
                </a>
                <i class="fa fa-angle-right text-gray-300 text-xs"></i>
                <span class="text-gray-400">状态查询</span>
            </div>
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-600">根据状态查询学生信息</h2>
            <p class="text-gray-400">选择学生状态，查询符合条件的学生列表</p>
        </div>

        <!-- 查询表单 -->
        <div class="bg-white rounded-xl p-6 card-shadow mb-8">
            <form id="queryForm" class="space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-2">
                        <label for="status" class="block text-sm font-medium text-gray-600 mb-1">
                            <span class="text-danger">*</span> 学生状态
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
                                <i class="fa fa-filter"></i>
                            </span>
                            <select 
                                id="status" 
                                name="status" 
                                required
                                class="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg form-focus appearance-none bg-white"
                            >
                                <option value="">请选择学生状态</option>
                                <option value="1">正常状态</option>
                                <option value="0">已删除</option>
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3">
                                <i class="fa fa-chevron-down text-gray-300 text-xs"></i>
                            </div>
                        </div>
                        <p class="text-xs text-gray-400">选择要查询的学生状态类型</p>
                    </div>
                </div>
                
                <div class="pt-4 flex flex-wrap gap-4">
                    <button type="submit" class="px-6 py-2.5 bg-primary text-white rounded-lg font-medium flex items-center btn-hover">
                        <i class="fa fa-search mr-2"></i>查询学生信息
                    </button>
                    <button type="reset" class="px-6 py-2.5 bg-gray-100 text-gray-600 rounded-lg font-medium flex items-center hover:bg-gray-200 transition-colors">
                        <i class="fa fa-refresh mr-2"></i>重置
                    </button>
                    <button type="button" id="viewAllBtn" class="px-6 py-2.5 bg-gray-100 text-gray-600 rounded-lg font-medium flex items-center hover:bg-gray-200 transition-colors">
                        <i class="fa fa-list mr-2"></i>查看全部
                    </button>
                </div>
            </form>
        </div>

        <!-- 结果统计 -->
        <div id="resultStats" class="mb-6 hidden">
            <div class="flex flex-wrap gap-4">
                <div class="bg-white p-4 rounded-xl card-shadow flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-users"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-400">查询结果总数</p>
                        <p class="text-xl font-bold text-gray-600" id="totalCount">0</p>
                    </div>
                </div>
                
                <div class="bg-white p-4 rounded-xl card-shadow flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center text-success">
                        <i class="fa fa-check-circle"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-400">正常状态</p>
                        <p class="text-xl font-bold text-gray-600" id="normalCount">0</p>
                    </div>
                </div>
                
                <div class="bg-white p-4 rounded-xl card-shadow flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-full bg-danger/10 flex items-center justify-center text-danger">
                        <i class="fa fa-times-circle"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-400">已删除</p>
                        <p class="text-xl font-bold text-gray-600" id="deletedCount">0</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 结果表格 -->
        <div id="resultTable" class="bg-white rounded-xl overflow-hidden card-shadow mb-8 hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-100">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">学生ID</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">姓名</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">班级</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">专业</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">性别</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">电话</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">状态</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody id="studentsTableBody" class="bg-white divide-y divide-gray-50">
                        <!-- 数据将通过JavaScript动态填充 -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 分页控件 -->
        <div id="pagination" class="flex justify-between items-center bg-white rounded-xl p-4 card-shadow hidden">
            <div class="text-sm text-gray-400">
                显示 <span id="startRange">0</span> - <span id="endRange">0</span> 条，共 <span id="totalItems">0</span> 条
            </div>
            <div class="flex items-center space-x-2">
                <button id="prevPage" class="px-3 py-1 border border-gray-200 rounded text-sm text-gray-600 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    <i class="fa fa-angle-left"></i>
                </button>
                <div id="paginationNumbers" class="flex items-center space-x-1">
                    <!-- 页码将通过JavaScript动态填充 -->
                </div>
                <button id="nextPage" class="px-3 py-1 border border-gray-200 rounded text-sm text-gray-600 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    <i class="fa fa-angle-right"></i>
                </button>
            </div>
        </div>

        <!-- 初始提示 -->
        <div id="initialPrompt" class="bg-white rounded-xl p-10 card-shadow text-center">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 text-primary mb-4">
                <i class="fa fa-filter text-2xl"></i>
            </div>
            <h3 class="text-lg font-semibold text-gray-600 mb-2">请选择学生状态进行查询</h3>
            <p class="text-gray-400 max-w-md mx-auto">选择学生的状态（正常或已删除），系统将为您展示符合条件的学生列表。</p>
        </div>

        <!-- 错误提示 -->
        <div id="errorMessage" class="bg-white rounded-xl p-8 card-shadow text-center hidden">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-danger/10 text-danger mb-4">
                <i class="fa fa-exclamation-circle text-2xl"></i>
            </div>
            <h3 class="text-lg font-semibold text-gray-600 mb-2">查询失败</h3>
            <p class="text-gray-400 max-w-md mx-auto mb-6" id="errorDetails"></p>
            <button id="retryBtn" class="px-6 py-2.5 bg-primary text-white rounded-lg font-medium flex items-center btn-hover mx-auto">
                <i class="fa fa-refresh mr-2"></i>重新查询
            </button>
        </div>

        <!-- 空结果提示 -->
        <div id="emptyResult" class="bg-white rounded-xl p-8 card-shadow text-center hidden">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 text-gray-400 mb-4">
                <i class="fa fa-search text-2xl"></i>
            </div>
            <h3 class="text-lg font-semibold text-gray-600 mb-2">未找到符合条件的学生</h3>
            <p class="text-gray-400 max-w-md mx-auto mb-6">当前选择的状态下没有找到对应的学生信息</p>
            <button id="changeQueryBtn" class="px-6 py-2.5 bg-primary text-white rounded-lg font-medium flex items-center btn-hover mx-auto">
                <i class="fa fa-edit mr-2"></i>修改查询条件
            </button>
        </div>

        <!-- 加载提示 -->
        <div id="loadingIndicator" class="bg-white rounded-xl p-8 card-shadow text-center hidden">
            <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary mb-4"></div>
            <h3 class="text-lg font-semibold text-gray-600 mb-2">正在查询</h3>
            <p class="text-gray-400">请稍候，系统正在检索学生信息...</p>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white mt-12 py-6 border-t border-gray-100">
        <div class="container mx-auto px-4 text-center text-gray-400 text-sm">
            <p>© 2023 学生信息管理系统 - 版权所有</p>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 表单元素
            const queryForm = document.getElementById('queryForm');
            const statusSelect = document.getElementById('status');
            
            // 显示区域
            const initialPrompt = document.getElementById('initialPrompt');
            const loadingIndicator = document.getElementById('loadingIndicator');
            const errorMessage = document.getElementById('errorMessage');
            const errorDetails = document.getElementById('errorDetails');
            const resultStats = document.getElementById('resultStats');
            const resultTable = document.getElementById('resultTable');
            const emptyResult = document.getElementById('emptyResult');
            const pagination = document.getElementById('pagination');
            
            // 统计元素
            const totalCount = document.getElementById('totalCount');
            const normalCount = document.getElementById('normalCount');
            const deletedCount = document.getElementById('deletedCount');
            
            // 表格元素
            const studentsTableBody = document.getElementById('studentsTableBody');
            
            // 分页元素
            const prevPageBtn = document.getElementById('prevPage');
            const nextPageBtn = document.getElementById('nextPage');
            const paginationNumbers = document.getElementById('paginationNumbers');
            const startRangeEl = document.getElementById('startRange');
            const endRangeEl = document.getElementById('endRange');
            const totalItemsEl = document.getElementById('totalItems');
            
            // 按钮
            const viewAllBtn = document.getElementById('viewAllBtn');
            const retryBtn = document.getElementById('retryBtn');
            const changeQueryBtn = document.getElementById('changeQueryBtn');
            
            // 分页变量
            let studentData = [];
            let currentPage = 1;
            const itemsPerPage = 10;
            
            // 事件监听器
            queryForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const status = statusSelect.value;
                
                if (!status) {
                    showError('请选择学生状态');
                    return;
                }
                
                fetchStudentsByStatus(status);
            });
            
            viewAllBtn.addEventListener('click', function() {
                window.location.href = 'all-students.html';
            });
            
            retryBtn.addEventListener('click', function() {
                errorMessage.classList.add('hidden');
                initialPrompt.classList.remove('hidden');
            });
            
            changeQueryBtn.addEventListener('click', function() {
                emptyResult.classList.add('hidden');
                initialPrompt.classList.remove('hidden');
            });
            
            prevPageBtn.addEventListener('click', goToPreviousPage);
            nextPageBtn.addEventListener('click', goToNextPage);
            
            // 重置表单
            queryForm.addEventListener('reset', function() {
                resetView();
            });
            
            // 重置视图
            function resetView() {
                resultStats.classList.add('hidden');
                resultTable.classList.add('hidden');
                pagination.classList.add('hidden');
                errorMessage.classList.add('hidden');
                emptyResult.classList.add('hidden');
                initialPrompt.classList.remove('hidden');
                studentData = [];
                currentPage = 1;
            }
            
            // 显示加载状态
            function showLoading() {
                initialPrompt.classList.add('hidden');
                resultStats.classList.add('hidden');
                resultTable.classList.add('hidden');
                pagination.classList.add('hidden');
                errorMessage.classList.add('hidden');
                emptyResult.classList.add('hidden');
                loadingIndicator.classList.remove('hidden');
            }
            
            // 显示错误
            function showError(message) {
                errorDetails.textContent = message || '查询失败，请稍后重试';
                loadingIndicator.classList.add('hidden');
                resultStats.classList.add('hidden');
                resultTable.classList.add('hidden');
                pagination.classList.add('hidden');
                initialPrompt.classList.add('hidden');
                emptyResult.classList.add('hidden');
                errorMessage.classList.remove('hidden');
            }
            
            // 渲染学生数据
            function renderStudents(data) {
                studentData = data;
                currentPage = 1;
                
                // 更新统计信息
                const normalStudents = data.filter(s => s.status === 1);
                const deletedStudents = data.filter(s => s.status === 0);
                
                totalCount.textContent = data.length;
                normalCount.textContent = normalStudents.length;
                deletedCount.textContent = deletedStudents.length;
                
                // 显示结果
                loadingIndicator.classList.add('hidden');
                initialPrompt.classList.add('hidden');
                
                if (data.length === 0) {
                    emptyResult.classList.remove('hidden');
                } else {
                    resultStats.classList.remove('hidden');
                    resultTable.classList.remove('hidden');
                    pagination.classList.remove('hidden');
                    
                    // 渲染表格和分页
                    renderTable();
                    renderPagination();
                    
                    // 平滑滚动到结果区域
                    resultStats.scrollIntoView({ behavior: 'smooth' });
                }
            }
            
            // 渲染表格
            function renderTable() {
                const startIndex = (currentPage - 1) * itemsPerPage;
                const endIndex = startIndex + itemsPerPage;
                const currentPageStudents = studentData.slice(startIndex, endIndex);
                
                studentsTableBody.innerHTML = currentPageStudents.map(student => `
                    <tr class="table-hover">
                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">${student.studentId}</td>
                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-600">${student.name || '-'}</td>
                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">${student.className || '-'}</td>
                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">${student.major || '-'}</td>
                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">${student.gender || '-'}</td>
                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">${student.phone || '-'}</td>
                        <td class="px-4 py-3 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${student.status === 1 ? 'bg-success/10 text-success' : 'bg-danger/10 text-danger'}">
                                ${student.status === 1 ? '正常' : '已删除'}
                            </span>
                        </td>
                        <td class="px-4 py-3 whitespace-nowrap text-sm">
                            <div class="flex items-center space-x-2">
                                <a href="student-by-id.html?id=${student.studentId}" class="text-primary hover:text-primary/80">
                                    <i class="fa fa-eye mr-1"></i>查看
                                </a>
                                <a href="update-student.html?id=${student.studentId}" class="text-warning hover:text-warning/80">
                                    <i class="fa fa-edit mr-1"></i>编辑
                                </a>
                            </div>
                        </td>
                    </tr>
                `).join('');
                
                // 更新分页信息
                updatePaginationInfo(studentData);
            }
            
            // 渲染分页
            function renderPagination() {
                const totalPages = Math.ceil(studentData.length / itemsPerPage);
                paginationNumbers.innerHTML = '';
                
                // 显示最多5个页码
                let startPage = Math.max(1, currentPage - 2);
                let endPage = Math.min(totalPages, startPage + 4);
                
                if (endPage - startPage < 4) {
                    startPage = Math.max(1, endPage - 4);
                }
                
                for (let i = startPage; i <= endPage; i++) {
                    const pageButton = document.createElement('button');
                    pageButton.className = i === currentPage 
                        ? 'px-3 py-1 bg-primary text-white rounded text-sm font-medium' 
                        : 'px-3 py-1 border border-gray-200 rounded text-sm text-gray-600 hover:bg-gray-50';
                    pageButton.textContent = i;
                    pageButton.addEventListener('click', () => goToPage(i));
                    paginationNumbers.appendChild(pageButton);
                }
                
                // 更新上一页/下一页按钮状态
                prevPageBtn.disabled = currentPage === 1;
                nextPageBtn.disabled = currentPage === totalPages;
            }
            
            // 更新分页信息
            function updatePaginationInfo(data) {
                const totalItems = data.length;
                const startRange = totalItems > 0 ? (currentPage - 1) * itemsPerPage + 1 : 0;
                const endRange = Math.min(currentPage * itemsPerPage, totalItems);
                
                startRangeEl.textContent = startRange;
                endRangeEl.textContent = endRange;
                totalItemsEl.textContent = totalItems;
            }
            
            // 跳转到指定页
            function goToPage(page) {
                currentPage = page;
                renderTable();
                renderPagination();
            }
            
            // 上一页
            function goToPreviousPage() {
                if (currentPage > 1) {
                    goToPage(currentPage - 1);
                }
            }
            
            // 下一页
            function goToNextPage() {
                const totalPages = Math.ceil(studentData.length / itemsPerPage);
                if (currentPage < totalPages) {
                    goToPage(currentPage + 1);
                }
            }
            
            // 获取学生信息
            function fetchStudentsByStatus(status) {
                showLoading();
                
                fetch(`/getStudentsByCondition/${status}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP error! Status: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        renderStudents(data || []);
                    })
                    .catch(error => {
                        console.error('获取学生信息失败:', error);
                        showError('查询失败，请检查网络连接或稍后重试');
                    });
            }
            
            // 检查URL参数，支持从其他页面带参数跳转
            const urlParams = new URLSearchParams(window.location.search);
            const statusParam = urlParams.get('status');
            if (statusParam && ['0', '1'].includes(statusParam)) {
                statusSelect.value = statusParam;
                queryForm.dispatchEvent(new Event('submit'));
            }
        });
    </script>
</body>
</html>